<template>
  <div id="search_container">
    <div class="search_wrap">
      <van-icon name="search" class="search_icon" />
      <input
        type="text"
        name=""
        id=""
        v-model="inputValue"
        @input="debounce"
      />
      <!-- v-if="inputValue != ''" -->
      <div class="cancel" @click="handleBack">取消</div>
      <!-- <div v-else class="cancel" @click="handleSearch">搜索</div> -->
    </div>
    <div class="advertisment">
      <img
        src="https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg"
        alt=""
      />
    </div>
    <transition name="slide-fade">
      <SongList v-if="ifShow" :songList="mySongList"></SongList>
    </transition>
  </div>
</template>

<script>
import { getSearch } from "@/http/Home/home";
import SongList from "../components/Song-list";
export default {
  components: {
    SongList,
  },
  data() {
    return {
      inputValue: "",
      mySongList: [],
      ifShow: false,
      timer:null
    };
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    async handleInput(e) {
      // if(e.isTrusted != true){
      //    if(this.inputValue==''){return false}
      //    let res = await getSearch({ keyword: this.inputValue });
      //    this.mySongList = res.songs;
      //    this.$store.commit('SET_SONG_LIST',this.mySongList)
      //    this.ifShow = true;
      // }else{
      //     this.ifShow = false
      // }
      //以上安卓不支持该属性
    },
    debounce() {
      var _arg = arguments;
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
         if(this.inputValue==''){this.ifShow = false; return false}
         let res = await getSearch({ keyword: this.inputValue });
         this.mySongList = res.songs;
         this.$store.commit('SET_SONG_LIST',this.mySongList)
         this.ifShow = true;
      }, 500);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import url("../assets/public/common.less");
@import url("../assets/Search/index.less");
</style>